<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <h1>磁体低温测试平台</h1>
      </el-header>
      <el-container>
        <el-aside width="200px" class="aside">
          <el-menu
            class="nav-menu"
            router
            default-active="/"
          >
            <el-menu-item index="/template">
              <el-icon><Document /></el-icon>
              <span>模板管理</span>
            </el-menu-item>
            <el-menu-item index="/curve">
              <el-icon><TrendCharts /></el-icon>
              <span>曲线预览</span>
            </el-menu-item>
            <el-menu-item index="/data">
              <el-icon><DataLine /></el-icon>
              <span>数据预览</span>
            </el-menu-item>
            <el-menu-item index="/log">
              <el-icon><List /></el-icon>
              <span>实验日志</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container class="right-container">
          <el-main class="main">
            <RouterView />
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-container {
  height: 100%;
}

.header {
  background-color: #409EFF;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
}

.header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.aside {
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
}

.nav-menu {
  border-right: none;
}

.right-container {
  height: calc(100vh - 40px); /* 减去header高度 */
  overflow: hidden; /* 防止出现全局滚动条 */
}

.main {
  padding: 5px;
  overflow-y: auto; /* 只在main区域显示滚动条 */
  height: 100%;
}

/* 菜单项样式 */
.el-menu-item {
  display: flex;
  align-items: center;
}

.el-menu-item .el-icon {
  margin-right: 8px;
}
</style>